<template>
  <div class="type">
    <van-search
      class="fixed search"
      placeholder="请输入搜索关键词"
      v-model="keyword"
    />

    <van-tree-select
      :items="categoryList" 
      :main-active-index.sync="activeIndex"
    >
      <template slot="content">
        <ul class="flex jc-sa fww">
          <li class="item">
            <img
              src="https://mall.s.maizuo.com/0181314b3c641fa9f9e2e4999389b879.png?x-oss-process=image/resize,w_180"
              alt=""
            />
            <p class="f12">烟台丑苹果 12枚装（75mm+/枚</p>
          </li>
          <li class="item">
            <img
              src="https://mall.s.maizuo.com/fac0e634a3fc27e1708ad06f667aa47d.png?x-oss-process=image/resize,w_180"
              alt=""
            />
            <p class="f12">水果牛奶白玉黄瓜 5斤装（18-25</p>
          </li>
          <li class="item">
            <img
              src="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png?x-oss-process=image/resize,w_180"
              alt=""
            />
            <p class="f12">红富士苹果 8-10枚5斤装（果径8</p>
          </li>
          <li class="item">
            <img
              src="https://mall.s.maizuo.com/bcc961c6faea5b9a2467c9d759db3cd6.png?x-oss-process=image/resize,w_180"
              alt=""
            />
            <p class="f12">海阳网纹瓜 2个5斤装（2.4-2.</p>
          </li>
          <li class="item">
            <img
              src="https://mall.s.maizuo.com/c3797b5e9dab17cb3e1c56547ba7d406.png?x-oss-process=image/resize,w_180"
              alt=""
            />
            <p class="f12">冰糖心丑苹果</p>
          </li>
          <li class="item">
            <img
              src="https://mall.s.maizuo.com/0238d75b8a9e13c5a18df9781c296c83.png?x-oss-process=image/resize,w_180"
              alt=""
            />
            <p class="f12">新鲜冰糖橙 5斤装 （果径60mm+</p>
          </li>
        </ul>
      </template>
    </van-tree-select>
    <Footer></Footer>
  </div>
</template>

<script> 
import Footer from "../components/Footer.vue";
export default {
  components: { 
    Footer,
  },  
  data() {
    return {
      activeIndex: 0,
      keyword: '',
      categoryList:[
      { text: '分组 1' }, { text: '分组 2' },{ text: '分组 3' },{ text: '分组 4' }
      ]
    }
  } 
};
</script>

<style lang="less">
@import './index.less';
</style>




